import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'package:kunlun_gas/app_files.dart';

import 'action.dart';
import 'state.dart';

Widget buildView(InstallHistoryDetailViewState state, Dispatch dispatch,
    ViewService viewService) {
  Widget _infoWidget() => Container(
        padding: EdgeInsets.only(left: 15, right: 15, bottom: 8),
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border(
                bottom: BorderSide(color: ThemeConfig.separeColor, width: 10))),
        child: Column(
          children: [
            Container(
              height: 44,
              child: Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  '客户信息',
                  style: TextThemeConfig.Font16WithColorBold22,
                ),
              ),
              margin: EdgeInsets.only(bottom: 4),
            ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 5),
              child: Row(
                children: [
                  Container(
                    width: 100,
                    child: Text(
                      '客户姓名',
                      style: TextThemeConfig.Font14WithColor66,
                    ),
                  ),
                  Text(
                    CommonUtils.checkNullToString(state.item['name']),
                    style: TextThemeConfig.Font14WithColor22,
                  ),
                ],
              ),
            ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 5),
              child: Row(
                children: [
                  Container(
                    width: 100,
                    child: Text(
                      '项目地址',
                      style: TextThemeConfig.Font14WithColor66,
                    ),
                  ),
                  Text(
                    CommonUtils.checkNullToString(state.item['orderInfo']),
                    style: TextThemeConfig.Font14WithColor22,
                  ),
                ],
              ),
            ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 5),
              child: Row(
                children: [
                  Container(
                    width: 100,
                    child: Text(
                      '联系电话',
                      style: TextThemeConfig.Font14WithColor66,
                    ),
                  ),
                  Text(
                    CommonUtils.checkNullToString(state.item['phone']),
                    style: TextThemeConfig.Font14WithColor22,
                  ),
                ],
              ),
            ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 5),
              child: Row(
                children: [
                  Container(
                    width: 100,
                    child: Text(
                      '表具信息',
                      style: TextThemeConfig.Font14WithColor66,
                    ),
                  ),
                  Text(
                    CommonUtils.checkNullToString(state.item['controllerType']),
                    style: TextThemeConfig.Font14WithColor22,
                  ),
                ],
              ),
            ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 5),
              child: Row(
                children: [
                  Container(
                    width: 100,
                    child: Text(
                      '表号',
                      style: TextThemeConfig.Font14WithColor66,
                    ),
                  ),
                  Text(
                    CommonUtils.checkNullToString(state.item['qbNumber']),
                    style: TextThemeConfig.Font14WithColor22,
                  ),
                ],
              ),
            ),
          ],
        ),
      );

  Widget _contentWidget() {
    List<String> panoramagramImgs = [];
    if (CommonUtils.checkNullToString(state.item['panoramagramImg'])
        .isNotEmpty) {
      panoramagramImgs =
          CommonUtils.checkNullToString(state.item['panoramagramImg'])
              .split(',');
    }

    List<String> pipelineImgs = [];
    if (CommonUtils.checkNullToString(state.item['pipelineImg'])
        .isNotEmpty) {
      pipelineImgs =
          CommonUtils.checkNullToString(state.item['pipelineImg'])
              .split(',');
    }

    List<String> gasMeterImgs = [];
    if (CommonUtils.checkNullToString(state.item['gasMeterImg'])
        .isNotEmpty) {
      gasMeterImgs =
          CommonUtils.checkNullToString(state.item['gasMeterImg'])
              .split(',');
    }

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: EdgeInsets.only(left: 15, right: 15, bottom: 6),
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                  bottom:
                      BorderSide(color: ThemeConfig.separeColor, width: 10))),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                height: 44,
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    '全景图片',
                    style: TextThemeConfig.Font16WithColorBold22,
                  ),
                ),
                margin: EdgeInsets.only(bottom: 4),
              ),
              panoramagramImgs.isEmpty
                  ? Container()
                  : Container(
                      margin: EdgeInsets.only(top: 3, bottom: 3),
                      height: 90,
                      child: ListView.builder(
                        itemBuilder: (BuildContext context, int index) {
                          var file = panoramagramImgs[index];
                          return InkWell(
                            child: Container(
                              margin: EdgeInsets.only(right: 12),
                              child: CustomImage(
                                file,
                                fit: BoxFit.fill,
                                width: 90,
                                height: 90,
                              ),
                            ),
                            onTap: () => dispatch(
                                InstallHistoryDetailViewActionCreator
                                    .onTapResultPic(file, panoramagramImgs)),
                          );
                        },
                        itemCount: panoramagramImgs.length,
                        scrollDirection: Axis.horizontal,
                        itemExtent: 102,
                        padding: EdgeInsets.only(),
                      ),
                    ),
            ],
          ),
        ),
        Container(
          padding: EdgeInsets.only(left: 15, right: 15, bottom: 6),
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                  bottom:
                  BorderSide(color: ThemeConfig.separeColor, width: 10))),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                height: 44,
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    '管道图片',
                    style: TextThemeConfig.Font16WithColorBold22,
                  ),
                ),
                margin: EdgeInsets.only(bottom: 4),
              ),
              pipelineImgs.isEmpty
                  ? Container()
                  : Container(
                margin: EdgeInsets.only(top: 3, bottom: 3),
                height: 90,
                child: ListView.builder(
                  itemBuilder: (BuildContext context, int index) {
                    var file = pipelineImgs[index];
                    return InkWell(
                      child: Container(
                        margin: EdgeInsets.only(right: 12),
                        child: CustomImage(
                          file,
                          fit: BoxFit.fill,
                          width: 90,
                          height: 90,
                        ),
                      ),
                      onTap: () => dispatch(
                          InstallHistoryDetailViewActionCreator
                              .onTapResultPic(file, pipelineImgs)),
                    );
                  },
                  itemCount: pipelineImgs.length,
                  scrollDirection: Axis.horizontal,
                  itemExtent: 102,
                  padding: EdgeInsets.only(),
                ),
              ),
            ],
          ),
        ),
        Container(
          padding: EdgeInsets.only(left: 15, right: 15, bottom: 6),
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                  bottom:
                  BorderSide(color: ThemeConfig.separeColor, width: 10))),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                height: 44,
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    '表具图片',
                    style: TextThemeConfig.Font16WithColorBold22,
                  ),
                ),
                margin: EdgeInsets.only(bottom: 4),
              ),
              gasMeterImgs.isEmpty
                  ? Container()
                  : Container(
                margin: EdgeInsets.only(top: 3, bottom: 3),
                height: 90,
                child: ListView.builder(
                  itemBuilder: (BuildContext context, int index) {
                    var file = gasMeterImgs[index];
                    return InkWell(
                      child: Container(
                        margin: EdgeInsets.only(right: 12),
                        child: CustomImage(
                          file,
                          fit: BoxFit.fill,
                          width: 90,
                          height: 90,
                        ),
                      ),
                      onTap: () => dispatch(
                          InstallHistoryDetailViewActionCreator
                              .onTapResultPic(file, gasMeterImgs)),
                    );
                  },
                  itemCount: gasMeterImgs.length,
                  scrollDirection: Axis.horizontal,
                  itemExtent: 102,
                  padding: EdgeInsets.only(),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  return Scaffold(
    appBar: myAppBar(viewService.context, title: '挂表详情'),
    body: SafeArea(
      child: GestureDetector(
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _infoWidget(),
              _contentWidget(),
            ],
          ),
        ),
        onTap: () => CommonUtils.closeKey(viewService.context),
        behavior: HitTestBehavior.translucent,
      ),
    ),
  );
}
